<template>
  <div class="app-container">
    <!-- 侧边栏 -->
    <!-- 侧边栏 -->
    <div class="sidebar">
      <div class="sidebar-header">
        <h2 class="sidebar-title">教师管理平台</h2>
        <el-button icon="el-icon-menu" class="toggle-btn" @click="toggleSidebar"></el-button>
      </div>
      <el-menu
          :default-active="activeMenu"
          class="el-menu-vertical-demo"
          background-color="#0b1b33"
          text-color="#fff"
          active-text-color="#409EFF"
          :collapse="isSidebarCollapse"
          router
      >
        <el-menu-item index="/kcgl">
          <el-icon><document /></el-icon>
          <span>课程管理</span>
        </el-menu-item>
        <el-menu-item index="/answer">
          <el-icon><QuestionFilled /></el-icon>
          <span>答疑管理</span>
        </el-menu-item>
        <el-menu-item index="/teacherper">
          <el-icon><setting /></el-icon>
          <span>个人中心</span>
        </el-menu-item>
      </el-menu>
    </div>

    <!-- 主内容区 -->
    <div class="main-content" :class="{ 'sidebar-collapse': isSidebarCollapse }">
      <!-- 面包屑（可根据实际需求调整） -->
      <el-breadcrumb separator="/" class="breadcrumb">
        <el-breadcrumb-item>我的课程</el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 页面标题与操作 -->
      <div class="page-header">
        <h1 class="page-title">我的课程</h1>
      </div>

      <!-- 搜索筛选区 -->
      <el-card class="search-card">
        <el-form :inline="true" :model="searchForm" class="search-form">
          <el-form-item label="搜索">
            <el-input v-model="searchForm.keyword" placeholder="请输入课程名称/讲师搜索" clearable />
          </el-form-item>
          <el-form-item label="分类">
            <el-select v-model="searchForm.category" placeholder="请选择分类">
              <el-option
                  v-for="category in courseCategories"
                  :key="category.value"
                  :label="category.label"
                  :value="category.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">
              <el-icon><search /></el-icon>搜索
            </el-button>
            <el-button @click="resetSearch">
              <el-icon><refresh /></el-icon>重置
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>

      <!-- 课程列表 -->
      <el-card class="course-list-card">
        <el-row :gutter="20">
          <el-col :span="8" v-for="course in courseList" :key="course.id">
            <el-card class="box-card">
              <img src="https://picsum.photos/300/200?random={{course.id}}" class="course-cover" alt="课程封面图">
              <div class="card-content">
                <div class="course-title"></div>
                <div class="course-info">
                  <span class="teacher">讲师：{{course.teacherRealName}}</span>
                  <span class="category">{{course.courseTitle}}</span>
                </div>
                <div class="course-footer">
                  <el-button
                      type="primary"
                      size="small"
                      @click="startLearning(course)"
                  >
                    <el-icon><arrow-right /></el-icon>进入课堂
                  </el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <!-- 暂无数据提示 -->
        <div v-if="courseList.length === 0" class="empty-course-list">
          <img src="https://picsum.photos/300/200?random=empty" alt="暂无课程" class="empty-image">
          <p class="empty-text">你还没有选择任何课程</p>
          <el-button
              type="primary"
              @click="goToAllCourses"
          >
            去选课
          </el-button>
        </div>

        <!-- 分页组件 -->
        <div class="pagination-container">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[6, 12, 18]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="courseList.length"
          />
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue'
import {
  Search,
  Refresh,
  Menu,
  User,
  ArrowRight
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import request from "@/utils/request.js";

// 侧边栏相关状态
const isSidebarCollapse = ref(false)
const activeMenu = ref('myCourses')
const toggleSidebar = () => {
  isSidebarCollapse.value = !isSidebarCollapse.value
}

// 课程管理相关状态
const state = reactive({
  courseList: [], // 我的课程列表数据
  currentPage: 1, // 当前页码
  pageSize: 6, // 每页显示数量
  searchForm: {
    keyword: '', // 搜索关键词
    category: '' // 分类筛选
  },
  courseCategories: [
    { label: '前端开发', value: '前端开发' },
    { label: '后端开发', value: '后端开发' },
    { label: '移动开发', value: '移动开发' },
    { label: '人工智能', value: '人工智能' },
    { label: '大数据', value: '大数据' },
    { label: '云计算', value: '云计算' }
  ]
})

const {
  courseList,
  currentPage,
  pageSize,
  searchForm,
  courseCategories
} = state

// 模拟获取我的课程列表数据
const fetchMyCourseList = () => {
  // 这里模拟接口请求，实际开发中替换为真实的 API 调用
  setTimeout(() => {
    courseList.splice(0, courseList.length)
    // 模拟返回的数据
    let mockData = [
      {
        id: 1,
        name: 'Vue3 实战教程',
        category: '前端开发',
        teacher: '张教授',
        status: 'learning'
      },
      {
        id: 3,
        name: 'React 高级应用',
        category: '前端开发',
        teacher: '王讲师',
        status: 'completed'
      },
      {
        id: 5,
        name: 'Flutter 跨平台开发',
        category: '移动开发',
        teacher: '陈老师',
        status: 'learning'
      },
      {
        id: 7,
        name: '大数据分析与应用',
        category: '大数据',
        teacher: '黄老师',
        status: 'learning'
      }
    ]
    request("/student/course").then(Response => {
      mockData = Response.data;
      courseList.push(...mockData)
    })

  }, 500)
}

onMounted(() => {
  fetchMyCourseList()
})

// 搜索课程
const handleSearch = () => {
  // 实际开发中，这里应该调用API并传入搜索参数
  ElMessage({
    message: `搜索关键词：${searchForm.keyword || '无'}，分类：${searchForm.category || '无'}`,
    type: 'info'
  })
}

// 重置搜索条件
const resetSearch = () => {
  searchForm.keyword = ''
  searchForm.category = ''
}

// 分页相关
const handleSizeChange = (newSize) => {
  pageSize.value = newSize
}

const handleCurrentChange = (newPage) => {
  currentPage.value = newPage
}

// 开始学习课程
const startLearning = (course) => {
  ElMessage({
    message: `即将开始学习「${course.name}」`,
    type: 'info'
  })
  // 实际开发中，这里应该跳转到课程详情页或学习页面
}

// 前往全部课程页
const goToAllCourses = () => {
  // 实际开发中，这里应该进行路由跳转
  ElMessage({
    message: '即将前往全部课程页面',
    type: 'info'
  })
}

// 监听侧边栏折叠状态
watch(isSidebarCollapse, (newVal) => {
  // 可在此处添加侧边栏折叠后的额外逻辑
})
</script>

<style scoped>
.app-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* 侧边栏样式 */
.sidebar {
  width: 220px;
  background-color: #0b1b33;
  color: #fff;
  transition: width 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  border-bottom: 1px solid #1f334b;
}

.sidebar-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.toggle-btn {
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 20px;
}

.el-menu-vertical-demo {
  border-right: none;
}

/* 主内容区样式 */
.main-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  transition: margin-left 0.3s ease-in-out;
}

.sidebar-collapse .main-content {
  margin-left: 64px; /* 侧边栏折叠后，主内容区调整左边距 */
}

/* 面包屑样式 */
.breadcrumb {
  margin-bottom: 10px;
}

/* 页面头部样式 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

/* 搜索卡片样式 */
.search-card {
  margin-bottom: 20px;
}

.search-form {
  display: flex;
  align-items: center;
}

/* 课程列表卡片样式 */
.course-list-card {
  margin-bottom: 20px;
}

/* 课程卡片样式 */
.box-card {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.box-card:hover {
  transform: translateY(-5px);
}

.course-cover {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.card-content {
  padding: 15px;
}

.course-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #303133;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  color: #606266;
  font-size: 14px;
}

.teacher, .category {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.teacher {
  margin-right: 10px;
}

.course-footer {
  text-align: right;
}

/* 空课程列表样式 */
.empty-course-list {
  text-align: center;
  padding: 50px 0;
}

.empty-image {
  width: 200px;
  height: 200px;
  margin-bottom: 20px;
  opacity: 0.5;
}

.empty-text {
  color: #909399;
  margin-bottom: 20px;
}

/* 分页样式 */
.pagination-container {
  margin-top: 20px;
  text-align: right;
}
</style>

